<template>
  <c-row class="wot-template" less-width="20px">
    <c-col :col="3" top>
      <c-row-search single>
        <c-row less-width="66px" :col="12">
          <c-col>
            <el-input
              v-model="keyword"
              clearable
              @keyup.enter.native="query"
              :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
            >
              <c-icon slot="prefix" name="search" prefix></c-icon>
            </el-input>
          </c-col>
          <c-col less right>
            <el-button type="primary" @click="query">
              {{ multLang('btn_search_a') }}
            </el-button>
          </c-col>
        </c-row>
      </c-row-search>

      <c-roll class="wot-template-tree">
        <el-tree
          ref="tree"
          :data="tree.data"
          node-key="value"
          @node-click="clickNode"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
        >
          <template slot-scope="{ data }">
            <c-text-long>{{ multLang(data.label) }} </c-text-long>
          </template>
        </el-tree>
      </c-roll>
    </c-col>
    <c-col less></c-col>
    <c-col :col="9" top>
      <TemplateAdd
        ref="TemplateAdd"
        :visible="isAdd"
        @update:visible="$emit('update:is-add', $event)"
        @query="query"
      ></TemplateAdd>
      <TemplateView
        :visible.sync="isView"
        :data="tree.click"
        @query="query"
      ></TemplateView>
      <TemplateFieldTable
        :visible.sync="isView"
        :data="tree.click"
      ></TemplateFieldTable>
    </c-col>
  </c-row>
</template>
<script>
import { searchWord } from '@/util/data'
import TemplateAdd from './TemplateAdd.vue'
import TemplateView from './TemplateView.vue'
import TemplateFieldTable from './TemplateFieldTable.vue'
import { delTemplateData, getTemplateData } from '@/http/api/v1/wot'
import { IsEmptyObj } from '@/util'
export default {
  name: 'Template',
  components: { TemplateAdd, TemplateView, TemplateFieldTable },
  props: {
    isAdd: { type: Boolean, default: false }
  },
  data() {
    return {
      visibles: {
        add: false,
        view: false
      },
      keyword: '',
      tree: {
        rawData: [],
        data: [],
        click: {}
      }
    }
  },
  computed: {
    isView() {
      return this.isAdd ? false : true
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    console.log(this)
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    add() {
      this.$refs.TemplateAdd.submit()
    },
    del() {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_ng']),
        this.multLang('btn_delete_a', 'title_ng'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { work_template_code } = this.tree.click
        work_template_code &&
          delTemplateData({ work_template_code }).then(({ code }) => {
            if (code === 200) {
              this.tree.click = {}
              this.query()
            }
          })
      })
    },
    search() {
      this.tree.data = searchWord(this.keyword, this.tree.rawData, 'label')
    },
    clickNode(node) {
      this.tree.click = node
      this.$nextTick().then(() => this.$refs.tree.setCurrentKey(node.value))
    },
    query() {
      getTemplateData({
        keywordSearch: this.keyword
      }).then(({ data }) => {
        this.tree.data = data
        const node = IsEmptyObj(this.tree.click) ? data[0] : this.tree.click
        node && this.clickNode(node)
      })
    }
  }
}
</script>
<style lang="scss">
.wot-template {
  @include wh;

  &-tree {
    box-sizing: border-box;
    height: calc(100% - 66px);
    padding: 20px;
    background-color: #fff;
    .c-text-long {
      font-size: 14px;
    }
  }
}
</style>
